import React from 'react';
import { connect } from 'dva';
import { Tabs, Form, Table, Pagination, Modal, message, Input, Select, Row, Col, Checkbox, Button, Icon, Radio, InputNumber, Card, Popconfirm, Tree } from 'antd';
import cx from 'classnames'
import styles from './roleInfoStyle.less'
import moment from 'moment';
import { isEmpty, cloneDeep } from 'lodash';
import { Link, hashHistory } from 'dva/router'
import { listConfig } from '../../../../config/config'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
/*
 * 权限管理-角色列表
 * @author 廖玉宾
 * @time 未知
 * */
const FormItem = Form.Item;
const TreeNode = Tree.TreeNode;
const Option = Select.Option;

const formItemLayout = {
	labelCol: {
		span: 2
	},
	wrapperCol: {
		span: 10
	},
}

const colLayout = {
	xs: { span: 20 },
	sm: { span: 18 },
	md: { span: 18 },
	lg: { span: 12 },
	xl: { span: 12 }
}

const namespace = 'roleInfoModel';
const roleInfoView = function ({ dispatch, roleInfoModel, form }) {
	const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form;
	const {
		roleTree,
		checkedKeys,
		halfCheckedKeys,
		detail,
		type,
		appList
	} = roleInfoModel;

	//状态值变化
	function updateModel(value, name, modHierarchy) {
		let obj = cloneDeep(roleInfoModel);
		//trace记录每一个访问路径
		let trace = [];
		trace.push(obj);
		if (modHierarchy) {
			modHierarchy = modHierarchy.split(".");
			modHierarchy.forEach((item, index) => {
				trace.push(trace[index][item]);
			});
		}
		trace[trace.length - 1][name] = value;
		// 分发到model
		dispatch({
			type: `${namespace}/updateModel`,
			payload: obj
		});
	};

	const onCheckBox = (c, e) => {
		// updateModel(c, 'checkedKeys')
		dispatch({
			type: `${namespace}/updateModel`,
			payload: {
				checkedKeys: c,
				halfCheckedKeys: e.halfCheckedKeys
			}
		});
	}

	const save = () => {
		validateFields((err, values) => {
			if (!err) {
				dispatch({ type: `${namespace}/save` })
			}
		})
	}

	//递归遍历树节点
	const loop = (data) => data.map((item, index) => {
		if (item.child && item.child.length > 0) {
			return (
				<TreeNode key={item.id} title={item.name}>
					{loop(item.child)}
				</TreeNode>
			)
		}
		return <TreeNode key={item.id} title={item.name} />;
	})

	// 路由视图
	return (
		<div className={cx('public_listMain')}>
			<Form>
				<div className={cx('functionButton', styles.savaBtn)}>
					<Button type='primary' onClick={() => { save() }}><i className={"iconfont icon-baocun"} />保存</Button>
				</div>

				<CollapsiblePanels title='角色详情' style={{ marginTop: 16 }} >
					<div className={styles.listTitleWrap}>
						<div className={styles.listTitle}>基本信息</div>
					</div>
					<div className={cx(styles.info)}>
						<Row>
							<Col span={2} style={{ width: 72, marginRight: 8 }}>
								<div className="ant-form-item-label">
									<label className="ant-form-item-required">角色名称</label>
								</div>
							</Col>
							<Col>
								<FormItem {...formItemLayout} hasFeedback>
									{getFieldDecorator('name', {
										rules: [{
											required: true, max: 50, message: '请输入角色名称,长度不超过50!',
										}],
										initialValue: detail.name
									})(
										<Input autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'name', 'detail') }} />
									)}
								</FormItem>
							</Col>
						</Row>

						<Row>
							<Col span={2} style={{ width: 72, marginRight: 8, textAlign: 'right' }}>
								<div className="ant-form-item-label">
									<label>角色说明</label>
								</div>
							</Col>
							<Col>
								<FormItem {...formItemLayout} hasFeedback>
									{getFieldDecorator('mark', {
										rules: [{
											required: false, max: 200, message: '输入角色说明,长度不超过200!',
										}],
										initialValue: detail.description
									})(
										<Input type="textarea" style={{ height: '60px' }} onChange={(e) => { updateModel(e.target.value, 'description', 'detail') }} />
									)}
								</FormItem>
							</Col>
						</Row>
					</div>

					<div className={styles.listTitleWrap}>
						<div className={styles.listTitle}>功能权限</div>
					</div>
					{
						detail && <Row className={styles.ziyuanWrap}>
								<Col className={styles.ziyuanLeft}>
									{
										roleTree && roleTree.length != 0 ?
											<Tree
												checkable={true}
												showLine={true}
												defaultExpandAll={true}
												onCheck={onCheckBox}
												checkedKeys={{ checked: checkedKeys, halfChecked: halfCheckedKeys }}
											>
												{loop(roleTree)}
											</Tree>
											: null
									}
								</Col>
							</Row>
					}
				</CollapsiblePanels>
			</Form>
		</div>
	);
};

export default connect(({ roleInfoModel }) => ({ roleInfoModel }))(Form.create()(roleInfoView));
